<template>
    <div class="bodyxxx">
        <index-navbar></index-navbar>
        <Scroll class="scroll"
                ref="scroll"
                :probe-type="3"
                @pullingUp="loadMore"
                :pull-up-load="true">
            <index-search></index-search>
            <IndexMvList :mvs="mvs" ></IndexMvList>
        </Scroll>
    </div>
</template>

<script>
    import {getIndexMV} from "network/index821";
    import IndexMvList from "@/views/index821/childIndex821/IndexMvList821";
    import Scroll from "@/components/common/scroll/Scroll";
    import IndexNavbar from "@/views/index821/childIndex821/IndexNavbar821";
    import IndexSearch from "@/views/index821/childIndex821/IndexSearch821";

    export default {
        name: "index",
        data(){
          return{
              page:0,
              mvs:[],
          }
        },
        mounted(){
            this.getIndexMV();

        },
        components:{
            IndexNavbar,
            IndexMvList,
            Scroll,
            IndexSearch
        },
        methods:{
            //网络请求
            getIndexMV(){
                getIndexMV(this.page,30).then(res=>{
                    this.page=this.page+30
                    console.log(res.data);
                    console.log(this.page);
                    this.mvs.push(...res.data)
                    //重新计算高度
                    this.$refs.scroll.finishPullUp()
                })
            },
            //下拉加载跟多
            loadMore(){
                this.getIndexMV()
                //计算高度
                this.$refs.scroll.scroll.refresh()
            }
        }
    }
</script>

<style scoped>
    .scroll{
        height: calc(100% - 49px - 49px);
        overflow:hidden;
    }
    .bodyxxx{
        height: 100vh;
        /*position: relative;*/
    }
</style>